<template>
	<view>
		<view class="pay-page">
			<view class="pay-conter">
				<view class="register_block">
					<view class="register_img">
						<image :src="datailObj.icon" mode=""></image>
					</view>
				</view>
				<view class="pay-title">
					<view class="tle-left">{{ datailObj.title }}</view>
					<view style="color: red">
						<text style="font-size: 24px">{{ datailObj.avgRate }}</text>
						<text style="font-size: 14px">%</text>
					</view>
				</view>
				<view class="pay-Balance">
					<view class="balance_text">
						<view style="font-size: 15px; width: 50px">{{$t('category.c33')}}</view>
						<view>
							<view style="margin-left: 20px;">
								{{ $store.getters.userInfo.user.balance }}
							</view>
							<!-- <input style="margin-left: 0px; border-bottom: 1px solid rgb(238, 238, 238)" v-model="numberInput" type="number" /> -->
						</view>
					</view>
				</view>
				<view class="pay-Balance">
					<view class="balance_text">
						<view class="zhifu">{{$t('category.c17')}}</view>
						<view>
							<input style="margin-left: 0px; border-bottom: 1px solid rgb(238, 238, 238)" v-model="money" type="text" inputmode="decimal" pattern="[0-9]*" />
						</view>
					</view>
				</view>
				<view class="pay-Balance">
					<view class="balance_text">
						<view class="zhifu">{{$t('category.c37')}}</view>
						<view>
							<input style="margin-left: 0px; border-bottom: 1px solid rgb(238, 238, 238)" v-model="tradePassword" type="password" />
						</view>
					</view>
				</view>
				<!-- 	<view class="balance">
					<view class="balance_text">
						<view class="zhifu">
							<text v-if="parameter == 'USDT'">USDT</text>
							<text v-else>我的余额</text>
						</view>
						<view class="balance_number">
							<text class="number">15555</text>
							<text class="uiconarrow">
								<u-icon name="arrow-right"></u-icon>
							</text>
						</view>
					</view>
				</view> -->
				<view class="register_submit" @click="submit">{{$t('category.c25')}}</view>
				<!-- 		<view class="gip">
					<text>单笔最低</text>
					<text class="ml-6" style="color: red">4399，</text>
					<text>最高</text>
					<text class="ml-6" style="color: red">8798，</text>
					<text>可投次数</text>
					<text class="ml-6" style="color: red">10，</text>
					<text>汇率</text>
					<text class="ml-6" style="color: red">6.82，</text>
				</view> -->
			</view>
		</view>
		<view style="height: 100px; width: 100%"></view>
		<FooterNav :modelKey="2" />
	</view>
</template>
<script>
import FooterNav from '@/components/footer-nav/footer-nav.vue';
import { getUserInfo, financialDetail, financialsubmit } from '@/api/index.js';
import store from '@/store';
export default {
	components: {
		FooterNav
	},
	props: {},
	data() {
		return {
			numberInput: '4399',
			password: '',
			parameter: 'USDT',
			ID: '',
			planId: '',
			money: '',
			tradePassword: '',
			datailObj: {}
		};
	},
	watch: {},
	created() {
			this.cetuser();
	},
	onLoad(parameter) {
		this.ID = parameter.id;
		this.parameter = parameter.type;
	},
	onShow() {
		this.init();
	},
	methods: {
		//判断用户
		cetuser(){

		},
		async init() {
			let res = await getUserInfo();
			if(!res.data.detail.userTardPwd){
				this.$modal.toast(this.$t('category.c24'));
				this.$Router.push('/subPackages/userOther/payPass');
				return
			}

			if(res.data.detail.auditStatusPrimary != 1){
				this.$modal.toast(this.$t('category.c38'));
				this.$Router.push('/subPackages/userGrid/business');
				return
			}
			console.log(res.data, 'resresres');
			// 更新 userInfo 并存储到本地
			this.$store.commit('USE_RINFO', res.data);
			// store.dispatch('getUserInfo',res.data)
			let Detail = await financialDetail({ id: this.ID });
			if (Detail.code == 200) {
				this.datailObj = Detail.data;
			}
		},
		async submit() {
			if (this.money == '') {
				return this.$modal.toast(this.$t('category.c39'));
			}
			if (this.money > this.$store.getters.userInfo.user.balance) {
				return this.$modal.toast(this.$t('category.c40'));
			}
			if (this.money == '') {
				return this.$modal.toast(this.$t('category.c41'));
			}
			let obj = {
				planId: this.ID,
				amount: this.money,
				tradePassword: this.tradePassword
			};
			financialsubmit(obj).then((res) => {
				if (res.code == 200) {
					this.$modal.toast(this.$t('category.c42'));
					this.$Router.push('/pages/category/index');
				}
			});
		}
	}
};
</script>
<style lang="scss" scoped>
page {
	background-color: #f5f5f5;
}
.pay-page {
	padding: 10px;
	.register_block {
		.register_img {
			width: 100%;
			height: 120px;
			overflow: hidden;
			border-radius: 6px;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	.pay-title {
		border-radius: 6px;
		height: 70px;
		width: 100%;
		margin-top: 10px;
		background-color: rgb(255, 255, 255);
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0px 10px;
		.tle-left {
			font-size: 16px;
		}
	}
	.pay-Balance {
		border-radius: 6px;
		width: 100%;
		margin-top: 10px;
		background-color: rgb(255, 255, 255);
		padding: 15px 10px 0px;
		.balance_text {
			display: flex;
			align-items: center;
			font-size: 26px;
			font-weight: bold;
			padding-left: 10px;
			margin-top: 0px;
			line-height: 50px;
			.zhifu {
				font-size: 14px;
				display: flex;
				align-items: center;
				font-weight: normal;
				margin-right: 10px;
			}
		}
	}
	.balance {
		border-radius: 6px;
		height: 50px;
		width: 100%;
		margin-top: 10px;
		background-color: rgb(255, 255, 255);
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0px 10px;
		.balance_text {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.zhifu {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 16px;
			flex: 1 1 0%;
		}
		.balance_number {
			width: 170px;
			font-size: 14px;
			text-align: right;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.number {
				width: 90%;
				padding-right: 10px;
				text-align: right;
			}
			.uiconarrow {
			}
		}
	}
	.register_submit {
		width: 100%;
		margin: 0 auto;
		height: 45px;
		background: linear-gradient(90deg, #ff6241, #ff6241, #ff3738);
		border-radius: 30px;
		margin-top: 40px;
		text-align: center;
		line-height: 45px;
		color: #fff;
		border: 0 solid;
		font-size: 15px;
		font-weight: 700;
	}
	.gip {
		padding-left: 10px;
		height: 50px;
		border-top: 0px solid rgb(238, 238, 238);
		font-size: 13px;
		color: rgb(102, 102, 102);
		margin-top: 10px;
	}
}
</style>
